<template>
  <div @mouseenter="hovering = true"
       @mouseleave="hovering = false"
  >
    <input type="text"
           v-bind="$attrs"
           :value="value"
           class="milk-input"
           @input="handleInput">
  </div>
</template>

<script>
export default {
  name: 'Input',
  props: {
    value: [String, Number]
  },
  methods: {
    handleInput (event) {
      this.$emit('input', event.target.value)
    }
  }
}
</script>

<style>
/*input.vue*/
.milk-input {
  width: 100%;
  height: 38px;
  font-size: 14px;
  padding: 0 14px;
  outline: none;
  border: 1px solid #FFFFFF;
  border-radius: 4px;
  box-shadow: 0 0 2rem 0 rgba(136, 152, 170, .15);
}

.milk-input::-webkit-input-placeholder {
  color: #cbcbcb;
  font-size: 14px;
}

.milk-input:focus {
  border-color: #769b94;
}
</style>
